{% extends "tables/base_vue_table.html" %}
{% load debate_tags static i18n %}

{% block body-class %}override-sidebar-offset{% endblock %}

{% block nav %}
  {# For admins and assistants, the draw opens without menu (for displaying in the briefing room) #}
  {% if user_role != "admin" and user_role != "assistant" %}
    {{ block.super }}
  {% endif %}
{% endblock %}

{% block page-subnav-sections %}

  <div class="btn-group scroll-speeds d-none d-md-flex">
    <div class="btn btn-outline-secondary">
      {% trans "Scroll Speed" %}
    </div>
    <div class="btn btn-outline-primary" data-target="0.07" id="scroll_draw1">
      {% trans "Fast" %}
    </div>
    <div class="btn btn-outline-primary" data-target="0.055" id="scroll_draw2">
      {% trans "Medium" %}
    </div>
    <div class="btn btn-outline-primary" data-target="0.04" id="scroll_draw3">
      {% trans "Slow" %}
    </div>
    <div class="btn btn-outline-primary" data-target="0.025" id="scroll_draw4">
      {% trans "Extra Slow" %}
    </div>
  </div>

  <div class="d-none d-md-flex">
    <div class="btn btn-outline-primary" id="hide_adjudicators">
      {% trans "Hide Adjudicators" %}
    </div>
    <div class="btn btn-outline-primary" id="show_adjudicators" style="display: none;">
      {% trans "Show Adjudicators" %}
    </div>
  </div>

  <div class="btn-group text-size d-none d-md-flex">
    <div class="btn btn-outline-secondary">
      {% trans "Text Size" %}
    </div>
    <div class="btn btn-outline-primary" data-target="draw-xs" id="tiny_text">
      {% trans "Tiny" %}
    </div>
    <div class="btn btn-outline-primary" data-target="draw-s" id="small_text">
      {% trans "Small" %}
    </div>
    <div class="btn btn-outline-primary" data-target="draw-m" id="medium_text">
      {% trans "Medium" %}
    </div>
    <div class="btn btn-outline-primary" data-target="draw-l" id="large_text">
      {% trans "Large" %}
    </div>
    <div class="btn btn-outline-primary" data-target="draw-xl" id="huge_text">
      {% trans "Huge" %}
    </div>
  </div>

  <div class="btn btn-secondary btn-sm btn btn-stop-scrolling fixed-top text-white mt-2 mr-2"
     data-target="draw-xs" id="stop_scrolling">
    {% trans "Stop Scroll" %}
  </div>

{% endblock %}

{% block js %}
  {{ block.super }}
  <script>
    function startScrolling() {
      {% if no_popovers %}
      $('.hover-target').css("pointer-events", "none")
      {% endif %}
      console.log('startScrolling');
      $('.table').addClass("hide-hover") // Hide the row highlight effect
      $('.popover').hide() // Hide any currently triggered popovers
      $('#stop_scrolling').show();
    }
    function stopScrolling() {
      {% if no_popovers %}
      $('.hover-target').css("pointer-events", "auto")
      {% endif %}
      console.log('stopScrolling');
      $('html, body').stop()
      $('.table').removeClass("hide-hover")
      $('#stop_scrolling').hide();
    }
    $(document).ready( function() {
      // Disable all popovers (if in the GA view)

      $('#stop_scrolling').hide();
      $(".scroll-speeds .btn").click(function(event){
        var speed = $(document).height() / $(this).attr('data-target');
        startScrolling()
        $('html, body').animate(
          { scrollTop: $(document).height() - $(window).height()},
          speed, // duration
          "linear", // easing
          function() {
            stopScrolling()
          } // on complete function
        );
        return false;
      });
      $(".text-size .btn").click(function(event){
        var sizeClass = $(this).attr('data-target');
        $(this).addClass("active").siblings().removeClass("active");
        $(".table").removeClass("draw-xs draw-s draw-m draw-l draw-xl").addClass( sizeClass);
        return false;
      });
      $("#hide_adjudicators").click(function(event){
        $("td.adjudicator-name, #hide_adjudicators, th.sort-adjudicators").hide()
        $("#show_adjudicators").show()
      });
      $("#show_adjudicators").click(function(event){
        $("td.adjudicator-name, #hide_adjudicators, th.sort-adjudicators").show()
        $("#show_adjudicators").hide()
      });
    });
    $(document).keydown(function(e) {
      e.stopPropagation();
      if (e.keyCode === 27 || e.keyCode === 38) { stopScrolling() }
    });
    $('#stop_scrolling').click(function(event){ stopScrolling() });
  </script>
{% endblock js %}
